<script src="{_INDEX_STATIC_}/lib/bootstrap/js/popper.min.js"></script>
<style>
    .carousel-inner img {
        width: 100%;
        height: 350px;
    }

    .shuffling_img {
        height: 400px;
        /* border: green 2px solid; */
        padding-top: 20px;
        padding-left: 5%;
        padding-right: 5%;
    }
</style>

<div class="shuffling_img">

    <div id="shuffling" class="carousel slide" data-ride="carousel">

        <!-- 指示符 -->
        <ul class="carousel-indicators">
            <li data-target="#shuffling" data-slide-to="0" class="active"></li>
            <li data-target="#shuffling" data-slide-to="1"></li>
            <li data-target="#shuffling" data-slide-to="2"></li>
        </ul>

        <!-- 轮播图片 -->
        <div class="carousel-inner">

            <div class="carousel-item active">
                <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
                <div class="carousel-caption">
                    <h3>第一张图片描述标题</h3>
                    <p>描述文字!</p>
                </div>
            </div>

            <div class="carousel-item">
                <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
                <div class="carousel-caption">
                    <h3>第二张图片描述标题</h3>
                    <p>描述文字!</p>
                </div>
            </div>

            <div class="carousel-item">
                <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
                <div class="carousel-caption">
                    <h3>第三张图片描述标题</h3>
                    <p>描述文字!</p>
                </div>
            </div>

        </div>

        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#shuffling" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#shuffling" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>

    </div>

</div>